<template>
  <div class="personal">
    <div class="personal_title">个性化</div>
    <div :style="{ marginBottom: '24px' }">
      <h3 class="setting-drawer-index-title">整体风格配色设置</h3>
      <div class="setting-drawer-index-blockChecbox">
        <a-tooltip>
          <template slot="title">
            暗色菜单风格
          </template>
          <div class="setting-drawer-index-item" @click="handleMenuTheme('dark')">
            <img :src="pageStyle_dark" alt="dark">
            <div class="setting-drawer-index-selectIcon" v-if="navTheme === 'dark'">
              <a-icon type="check"/>
            </div>
          </div>
        </a-tooltip>
        
        <a-tooltip style="margin-left:20px;">
          <template slot="title">
            亮色菜单风格
          </template>
          <div class="setting-drawer-index-item" @click="handleMenuTheme('light')">
            <img :src="pageStyle_light" alt="light">
            <div class="setting-drawer-index-selectIcon" v-if="navTheme !== 'dark'">
              <a-icon type="check"/>
            </div>
          </div>
        </a-tooltip>
      </div>
    </div>
    <a-divider />
    <div :style="{ marginBottom: '24px' }">
      <h3 class="setting-drawer-index-title">页面风格配色</h3>

      <div style="height: 20px" class="theme-color-title">
        <a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index">
          <template slot="title">
            {{ item.key }}
          </template>
          <a-tag :color="item.color" @click="changeColor(item.color)">
            <a-icon type="check" v-if="item.color === primaryColor"></a-icon>
          </a-tag>
        </a-tooltip>
      </div>
    </div>
    <a-divider />

    <div :style="{ marginBottom: '24px' }">
      <h3 class="setting-drawer-index-title">导航模式</h3>
      <div class="setting-drawer-index-blockChecbox">
        <a-tooltip>
          <template slot="title">
            侧边栏导航
          </template>
          <div class="setting-drawer-index-item" @click="handleLayout('sidemenu')">
            <img :src="pageNav_left" alt="sidemenu">
            <div class="setting-drawer-index-selectIcon" v-if="layout === 'sidemenu'">
              <a-icon type="check"/>
            </div>
          </div>
        </a-tooltip>
        <a-tooltip style="margin-left:20px;">
          <template slot="title">
            顶部栏导航
          </template>
          <div class="setting-drawer-index-item" @click="handleLayout('topmenu')">
            <img :src="pageNav_top" alt="topmenu">
            <div class="setting-drawer-index-selectIcon" v-if="layout !== 'sidemenu'">
              <a-icon type="check"/>
            </div>
          </div>
        </a-tooltip>
      </div>
    </div>

  </div>
</template>

<script>
import {updateTheme, colorList} from '../../components/SettingDrawer/settingConfig'
import { baseMixin } from '@/store/app-mixin'
import { TOGGLE_NAV_THEME, TOGGLE_LAYOUT, TOGGLE_COLOR } from '@/store/mutation-types'
export default {
  data () {
    return {
      colorList,
      styleList: {},
      currentColor: '',
      buttonLoading: false,
      pageStyle_dark: require('@/assets/icons/LCkqqYNmvBEbokSDscrm.svg'),
      pageStyle_light: require('@/assets/icons/jpRkZQMyYRryryPNtyIC.svg'),
      pageNav_left: require('@/assets/icons/LCkqqYNmvBEbokSDscrm.svg'),
      pageNav_top: require('@/assets/icons/KDNDBbriJhLwuqMoxcAr.svg')
    }
  },
  mixins: [baseMixin],
  computed: {},
  watch: {
    primaryColor(val){
      updateTheme(this.primaryColor)
    }
  },
  mounted () {},
  methods: {
    // 改变state状态
    handleMenuTheme (theme) {
      this.$store.commit(TOGGLE_NAV_THEME, theme)
      this.$store.dispatch('UpdateUserStyle')
    },
    // 改变state状态
    handleLayout (layout) {
      this.$store.commit(TOGGLE_LAYOUT, layout)
      this.$store.dispatch('UpdateUserStyle')
    },
    // 改变state状态
    changeColor (color) {
      this.currentColor = color
      if (this.primaryColor !== color) {
        this.$store.commit(TOGGLE_COLOR, color)
        this.$store.dispatch('UpdateUserStyle')
      }
    },
  }
}
</script>

<style lang="less" scoped>

  .setting-drawer-index-content {

    .setting-drawer-index-blockChecbox {
      display: flex;

      .setting-drawer-index-item {
        margin-right: 16px;
        position: relative;
        border-radius: 4px;
        cursor: pointer;

        img {
          width: 48px;
        }

        .setting-drawer-index-selectIcon {
          position: absolute;
          top: 0;
          right: 0;
          width: 100%;
          padding-top: 15px;
          padding-left: 24px;
          height: 100%;
          color: #1890ff;
          font-size: 14px;
          font-weight: 700;
        }
      }
    }
    .setting-drawer-theme-color-colorBlock {
      width: 20px;
      height: 20px;
      border-radius: 2px;
      float: left;
      cursor: pointer;
      margin-right: 8px;
      padding-left: 0px;
      padding-right: 0px;
      text-align: center;
      color: #fff;
      font-weight: 700;

      i {
        font-size: 14px;
      }
    }
  }

  .setting-drawer-index-handle {
    position: absolute;
    top: 240px;
    background: #1890ff;
    width: 48px;
    height: 48px;
    right: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    pointer-events: auto;
    z-index: 1001;
    text-align: center;
    font-size: 16px;
    border-radius: 4px 0 0 4px;

    i {
      color: rgb(255, 255, 255);
      font-size: 20px;
    }
  }
</style>


<style scoped>
.personal_title {
  font-size: 24px;
  line-height: 60px;
}

.personal>>>.ant-divider-horizontal {
  margin: 40px 0;
}

.personal>>>h3.setting-drawer-index-title {
  margin-bottom: 25px;
}

.theme-color-title{
  display: flex;
}

.theme-color-title span {
  width: 20px;
  height: 20px;
}

.theme-color-title span i.anticon.anticon-check{
  margin-left: -5px;
}

.setting-drawer-index-blockChecbox {
  display: flex;
}

.setting-drawer-index-selectIcon {
  margin-top: -35px;
  margin-left: 20px;
}

.info_button{
  margin-left: 20px;
}

.personal_title{
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}

.personal_title span {
  display: block;
  float: left;
  margin-bottom: 0;
  padding-right: 12px;
  color: rgba(0,0,0,.85);
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
}
</style>
